<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="产业地图"></CustomNav>
		<view :style="'margin-top:'+mt">
			<map :longitude="mapConf.longitude" :latitude="mapConf.latitude" :scale="mapConf.scale"
				:markers="mapConf.markers" id="map"></map>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				mapConf: {
					longitude: 98.605655,
					latitude: 39.680126,
					scale: 9.2,
					markers: [
						//{
						// 	id: 1, //下河清镇
						// 	longitude: 98.980462,
						// 	latitude: 39.560477,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 2,
						// 	longitude: 98.912916,
						// 	latitude: 39.569609,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 3, //丰乐镇
						// 	longitude: 98.897147,
						// 	latitude: 39.389238,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 4,
						// 	longitude: 98.908095,
						// 	latitude: 39.390993,
						// 	iconPath: '/static/images/hua.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 5, //金佛寺镇
						// 	longitude: 98.781268,
						// 	latitude: 39.424391,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 6,
						// 	longitude: 98.758109,
						// 	latitude: 39.488298,
						// 	iconPath: '/static/images/hua.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 7,
						// 	longitude: 98.778064,
						// 	latitude: 39.40736,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 8, //东洞镇
						// 	longitude: 98.663098,
						// 	latitude: 39.542734,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 9,
						// 	longitude: 98.63409,
						// 	latitude: 39.551714,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 10, //总寨
						// 	longitude: 98.666648,
						// 	latitude: 39.656048,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 11,
						// 	longitude: 98.676777,
						// 	latitude: 39.630774,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 12, //上坝镇
						// 	longitude: 98.712407,
						// 	latitude: 39.612822,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 13,
						// 	longitude: 98.786086,
						// 	latitude: 39.583115,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 14, //铧尖镇
						// 	longitude: 98.48524,
						// 	latitude: 39.701201,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 15, //西峰镇
						// 	longitude: 98.49749,
						// 	latitude: 39.722475,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 16, //西洞镇
						// 	longitude: 98.459478,
						// 	latitude: 39.654948,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 17,
						// 	longitude: 98.398412,
						// 	latitude: 39.679881,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 18, //泉湖镇
						// 	longitude: 98.571513,
						// 	latitude: 39.754279,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 19, //黄泥堡乡
						// 	longitude: 98.834582,
						// 	latitude: 39.71755,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 20, //三墩镇
						// 	longitude: 98.730103,
						// 	latitude: 39.788998,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 21, //银达镇
						// 	longitude: 98.563181,
						// 	latitude: 39.792638,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 22,
						// 	longitude: 98.579623,
						// 	latitude: 39.810221,
						// 	iconPath: '/static/images/hua.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 23, //果园镇
						// 	longitude: 98.486798,
						// 	latitude: 39.786156,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 26, //果园镇
						// 	longitude: 98.492837,
						// 	latitude: 39.770018,
						// 	iconPath: '/static/images/tomato.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 24,
						// 	longitude: 98.487362,
						// 	latitude: 39.785056,
						// 	iconPath: '/static/images/yumi.png',
						// 	width: 30,
						// 	height: 30
						// },
						// {
						// 	id: 25, //清水镇
						// 	longitude: 99.01853,
						// 	latitude: 39.385245,
						// 	iconPath: '/static/images/shucai.png',
						// 	width: 30,
						// 	height: 30
						// }
					],
				},
			}
		},
		watch: {

		},
		methods: {
			getMap() {
				this.mapCtx = wx.createMapContext('map') //map 组件的 id
				this.mapCtx.addGroundOverlay({
					id: 1,
					src: "https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/suzhouMap.png", //图层图片路径
					bounds: { //图片覆盖的经纬度范围
						southwest: { //西南角经纬度
							latitude: 39.119246,
							longitude: 98.194266,
						},
						northeast: { //东北角经纬度
							latitude: 40.015517,
							longitude: 99.501767,
						}
					},
					zIndex: 1,
				})
			}
		},
		onLoad() {
			this.getMap()
		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #68C759, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;

		map {
			width: 100%;
			height: 90vh;
		}
	}
</style>